<template>
	<view class="bg">
		<view class="page" v-if='isSuccess'>
			<view class="container">
				<view class="text">
					<view class="">找零工 </view>
					<view class="amount">
						<view class="yang">￥</view>{{yuan}}
					</view>
				</view>
				<view class="btn"> 完成 </view>
			</view>
			<view class="mask">
				<view class="center">
					<view class="text">
						<image class="sucess" src="../../../static/sucesss.png" mode=""></image>
					</view>
					<view class="line"></view>
					<button plain="true" open-type="launchApp" :app-parameter="trade">确定</button>
				</view>
			</view>
		</view>
		<view class="btns" v-if='isrest'>
			<button plain="true" class="button2" @click="MP_WXPay">再次支付</button>
			<button plain="true" open-type="launchApp" :app-parameter="trade" class="button1">返回</button>
		</view>
	</view>
</template>
<script>
	import {
		baseURL
	} from '@/config/index.js'
	export default {
		data() {
			return {
				timeStamp: "",
				nonceStr: "",
				package: "",
				signType: "",
				paySign: "",
				isSuccess: false,
				yuan: 0,
				trade: '',
				updateTimer: null,
				appToken: '',
				requestObj: {},
				api: '',
				openid: '',
				orderInfo: {},
				isrest: false,
				isJson: '',
				contnet: {}
			};
		},
		methods: {
			// 微信登录获取code
			getUserT() {
				uni.login({
					provider: 'weixin',
					success: res => {
						let code = res.code
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								this.getWxCode(code)
							}
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '授权失败',
							icon: 'none'
						})
					},
				})
			},
			// 获取token
			async getWxCode(code) {
				let res = await this.$fetch(this.$api.wx_login_xcx, {
					code: code
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (this.openid !== res.data.openid) {
					this.openid = res.data.openid
					this.getData()
				}
				this.getPayDate()
			},
			// 更新支付状态
			getData() {
				let header = {
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
					token: 'DLG_TOKEN_' + this.appToken
				}
				let updateData = {
					token: this.appToken,
					openId: this.openid
				}
				uni.request({
					url: baseURL + this.$api.updateUserOpenId,
					data: updateData,
					method: "POST",
					header,
					success: (res) => {},
					fail(e) {
						uni.showToast({
							title: `${e}`,
							icon: 'none'
						})
					}
				})
			},
			// 获取跳转数据
			getPayDate() {
				try {
					if (!this.requestObj.cardId && this.contnet.cardId) {
						this.requestObj.cardId = this.contnet.cardId
					}
				} catch (e) {
					//TODO handle the exception
				}
				console.log(this.contnet, this.requestObj, '数据')
				if (this.isJson == '1') {
					let header = {
						'Content-Type': 'application/json; charset=UTF-8',
						token: 'DLG_TOKEN_' + this.appToken
					}
					uni.request({
						url: `${baseURL}${this.api}?payType=${this.requestObj.payType}`,
						data: {
							...this.requestObj,
							...this.contnet,
						},
						method: "POST",
						header,
						success: (res) => {
							console.log(res, '跳转数据')
							if (res.data.code == 0) {
								this.orderInfo = res.data.data
								this.yuan = (this.orderInfo.money / 100).toFixed(2)
								this.trade = this.orderInfo.trade
								this.MP_WXPay()
							}
						},
						fail(e) {
							uni.showToast({
								title: `${e}`,
								icon: 'none'
							})
						}
					})
				} else {
					let header = {
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
						token: 'DLG_TOKEN_' + this.appToken
					}
					uni.request({
						url: baseURL + this.api,
						data: {
							...this.contnet,
							...this.requestObj
						},
						method: "POST",
						header,
						success: (res) => {
							console.log(res, '跳转数据', this.requestObj, this.appToken)
							if (res.data.code == 0) {
								this.orderInfo = res.data.data
								this.yuan = (this.orderInfo.money / 100).toFixed(2)
								this.trade = this.orderInfo.trade
								this.MP_WXPay()
							}
						},
						fail(e) {
							uni.showToast({
								title: `${e}`,
								icon: 'none'
							})
						}
					})
				}
			},
			MP_WXPay() {
				let that = this
				uni.hideLoading()
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: this.orderInfo.timeStamp, //时间戳
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.paySign,
					success: res => {
						this.isSuccess = true
						uni.showToast({
							title: '支付成功，请返回APP',
							icon: 'none'
						})
					},
					fail: function(res) {
						if (res.errMsg === "requestPayment:fail cancel") {
							console.log('MP_WXPay', res, that.isrest, 8888888)
							that.isrest = true
							this.isLoading = false
							this.isCancel = true
							this.status = 0
							uni.showToast({
								title: '您已取消支付',
							})
						} else {
							this.isLoading = false
							this.isFail = true
							this.status = 2
							uni.showToast({
								title: '支付失败，请重新支付',
								icon: 'none'
							})
						}
					}
				})
			},
		},
		onLoad(options) {

			// uni.showLoading({
			// 	title: '请稍后...',
			// 	mask: true
			// })
			console.log(options, '传递过来的数据')
			this.appToken = options.token
			this.requestObj = JSON.parse(options.requestObj)
			try {
				if (!this.requestObj.cardId && this.contnet.cardId) {
					this.requestObj.cardId = this.contnet.cardId
				}
			} catch (e) {
				//TODO handle the exception
			}
			this.api = options.api
			this.isJson = options.isJson
			this.openId = options.openId
			try {
				this.contnet = JSON.parse(options.contnet)
			} catch (e) {
				//TODO handle the exception
			}
			this.getUserT()
		}
	}
</script>
<style lang="less" scoped>
	.bg {
		width: 100vw;
		height: 100vh;
	}

	.page {
		.container {
			width: 100vw;
			height: 100vh;
			background-color: #FFFFFF;
			text-align: center;
			overflow: hidden;

			.text {
				margin-top: 150rpx;

				.amount {
					line-height: 150rpx;
					color: #1A1A1A;
					font-size: 76rpx;
					font-weight: bolder;
					display: flex;
					justify-content: center;

					.yang {
						font-size: 48rpx;
						font-weight: bold;
						margin-top: -10rpx;
					}
				}
			}

			.btn {
				width: 304rpx;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
				margin: 0 auto;
				margin-top: 55vh;
				background-color: #F2F2F2;
				color: #12BA6C;
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.center {
				background-color: #FFF;
				height: 300rpx;
				border-radius: 24rpx;
				width: 600rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 60rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				.line {
					height: 1px;
					width: 100%;
					background-color: #F2F2F2;
				}

				button {
					color: #09BB07;
					line-height: 60rpx;
					height: 60rpx;
					width: 100%;
					border: 0;
					outline: none;
					background-color: transparent;
				}
			}
		}
	}

	.sucess {
		width: 180rpx;
		height: 60rpx;
		margin-top: 50rpx;
	}

	.button1 {
		color: #09BB07;
		height: 80rpx;
		width: 60%;
		border: 0;
		background-color: transparent;
		border: 1rpx solid #09BB07;
		margin-top: 40rpx;
		line-height: 80rpx;
	}

	.button2 {
		color: #fff;
		height: 80rpx;
		width: 60%;
		line-height: 80rpx;
		border: 0;
		outline: none;
		background-color: #09BB07;
	}

	.btns {
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
	}
</style>